<template>
  <div class="app-container pagePublic">
    <div class="buttonGroup">
      <el-button :class="orderStatus==2?'b1':'b2'" @click="orderStatusChange(2)">待接受订单</el-button> <!-- 多个接单员 -->
      <el-button :class="orderStatus==3?'b1':'b2'" @click="orderStatusChange(3)">已拒绝订单</el-button><!-- 多个接单员 -->
      <el-button :class="orderStatus==4?'b1':'b2'" @click="orderStatusChange(4)">进行中订单</el-button><!-- 1个接单员 -->
      <el-button :class="orderStatus==5?'b1':'b2'" @click="orderStatusChange(5)">待审核订单</el-button><!-- 1个接单员 -->
      <el-button :class="orderStatus==11?'b1':'b2'" @click="orderStatusChange(11)">延期申请订单</el-button><!-- 1个接单员 -->
    </div>
    <tobe-accepted v-if="orderStatus==2" :order-status="orderStatus" />
    <rejected v-if="orderStatus==3" :order-status="orderStatus" />
    <beunder-construction v-if="orderStatus==4" :order-status="orderStatus" />
    <tobe-audited v-if="orderStatus==5" :order-status="orderStatus" />
    <delayApply v-if="orderStatus==11" :order-status="orderStatus"></delayApply>
  </div>
</template>

<script>
import tobeAccepted from './componets/tobeAccepted'
import rejected from './componets/rejected'
import beunderConstruction from './componets/beunderConstruction'
import tobeAudited from './componets/tobeAudited'
import delayApply from './componets/delayApply'
export default {
  name:'alreadyRelease',
  components: {
    tobeAccepted,
    rejected,
    beunderConstruction,
    tobeAudited,
    delayApply
  },
  data() {
    return {
      orderStatus: 2// 按钮切换(2-待接受,3-已拒绝,4-进行中,5-待审核,11-延期申请)
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    orderStatusChange(status) {
      this.orderStatus = status
    }
  }
}
</script>
<style lang="scss" scoped>
  .buttonGroup{
    width: 100%;
    padding: 5px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
  }
  .b1{
    color: #fff;
    border-color: #badeff;
    background-color: #1890ff;
  }
  .b2{
    background: #fff;
    border-color: #DCDFE6;
    color: #606266;
   }
</style>
